<html>
<head>
  <meta charset="utf-8">
  <!-- NOTE:  Don't change this Title -->
  <title>Quiz Maker Utility</title>

<script>
function setupProblemBlocks() {
  console.log("RAM setupProblemBlocks()");
  Blockly.doIt('setupproblem');
}

function setupSolutionBlocks() {
  console.log("RAM setupSolutionBlocks()");
  Blockly.doIt('setupsolution');
}

function previewTheQuiz() {
  console.log("RAM previewTheQuiz()");
  Blockly.doIt('preview');
}

function generateJSON() {
  console.log("RAM generateJSON()");
  Blockly.doIt('json');
}

function testGiveHint() {
  console.log("RAM testGiveHint()");
  Blockly.doIt('hint');
}

function toggleNewTest() {
  console.log("RAM toggleNewTest()");
  Blockly.doIt('submit');
}

function onAnswerTypeSelected(option) {
  console.log("RAM onAnswerTypeSelected()");
  Blockly.doIt('type', option);
}

function onExpressionTypeSelected(option) {
  console.log("RAM onExpressionTypeSelected()");
  Blockly.doIt('expression', option);
}

function getVariableRanges(obj) {
  console.log("RAM getVariableRanges()");
  Blockly.doIt('variables', obj);
}

function initQuizMaker() {
  console.log("RAM initQuizMaker()");
  Blockly.doIt('init', './');
}
function displayHelp() {
  console.log("RAM: help");
  alert("Help is on the way");
}
function reset() {
  console.log("RAM: reset");
  var response = confirm("Are you sure? This will reinitialize the app.");
  if (response == true) { 
  }

}
</script>
  <link href="common.css" rel="stylesheet" type="text/css">

  <style>
    body {
      background-color: white;
      font-family: sans-serif;
    }
    h1 {
      font-weight: normal;
      font-size: 140%;
    }
    #svgDiv {
      height: 350px;
      width: 98%;
      border: 1px solid #ccc;
    }

    /* Quiz area */
    textarea.quiz_question {
      text-align:left;
      background-color= #f3f3f3;
      rows="4";
      columns="60";
    }
    textarea.quiz_result {
      text-align:left;
      rows="4";
      columns="60";
    }
  </style>
</head>
<body>
<!--    <fieldset><legend>Quiz Maker Utility</legend> -->
      <input type="hidden" id="name"></input>
      Name: <input title="Plain text name for the quiz" size="" type="Text" id="display_name" value="Simple Problem"> </input>&nbsp;&nbsp;
       Answer Type: <select title="The type of quiz"  id="answer_type" onchange="onAnswerTypeSelected(this)"> 
                    <option 
                      title="The student's answer will be evaluated and the value compared to your solution."
                      value="eval_expr">Expression Evaluation</option>
                    <option 
                      title="The student's answer will be compared character-by-charecter with your solution." 
                      value="xml_blocks">Exact Block-for-block Match</option>
                    <option 
                      title="The student-defined function will be evaluated on test inputs that you provide  and the results compared with your function's results."
                      value="func_def">Function Definition</option>
                    </select>
     <!-- Some invisible elements that appear based on selection of answer_type -->
       <select title="Type of expression to evaluate" style="visibility:hidden" id="expression_type" onchange="onExpressionTypeSelected(this)"> 
                    <option value="relation">Relational: &LT;, =, ...</option>
                    <option value="arithmetic">Arithmetic: +, *, ...</option>
                    <option value="boolean">Boolean: AND, OR, NOT</option>
       </select>
     <button title="Display instructions" 
             class="help"
             id="help_btn" 
             onclick="displayHelp()"
             align="right">Help</button>
     <button title="Reinitialize everything" 
             class="help"
             id="reset_btn" 
             onclick="reset()"
             align="right">Reset</button>

     <br>Description: <input title="Type is a brief description of the quiz" 
                             type="Text" 
                             id="description" 
                             size="111" 
                             value="Describe the quiz problem."> </input>
     <br>QuestionHTML: <input title="Question presented to student. Can have HTML and variables. Hint <enter> to prompt for variables"  
                              type="Text" 
                              onkeypress="if (event.keyCode == 13) getVariableRanges(this)" 
                              id="question_html" size="106" 
                              value="Can have HTML and string variables such as $#STR1#$ and numeric variables like -91.9. Press <ENTER> to set."</input>

     <button title="Setup how the quiz will be presented in the workspace" 
             id="problemspace"  
             onclick="setupProblemBlocks()">1. Setup Problem</button>
     <button title="Setup the blocks for the quiz's solution" 
             id="solutionspace" 
             disabled="true" 
             onclick="setupSolutionBlocks()">2. Setup Solution</button>

     <br>Hints: <input type="Text" id="hint_1" size="120" value="Hint #1."> </input>

     <button title="Preview whether the quiz is as you want it" 
             id="test" 
             disabled="true" 
             onclick="previewTheQuiz()">3. Preview the Quiz&nbsp;&nbsp;</button>
     <button title="Display a savable JSON string for the quiz" 
             id="generate" 
             disabled="true" 
             onclick="generateJSON()">4. Generate JSON</button>

     <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="Text" id="hint_2" size="125" value="Hint #2."> </input>
     <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="Text" id="hint_3" size="125" value="Hint #3."> </input>

     <br>Built-in Blocks 
             <input type="checkbox" name="built_ins" value="math" checked="true">Math
             <input type="checkbox" name="built_ins" value="logic" checked="true">Logic
             <input type="checkbox" name="built_ins" value="text" checked="true">Text
             <input type="checkbox" name="built_ins" value="colors" checked="true">Colors
             <input type="checkbox" name="built_ins" value="controls" checked="true">Controls
             <input type="checkbox" name="built_ins" value="variables" checked="true">Variables
             <input type="checkbox" name="built_ins" value="procedures" checked="true">Procedures
     <br>Components
             <input type="checkbox" name="components" value="Button">Button
             <input type="checkbox" name="components" value="Sound">Sound
   <br>
   <br>
<!--    <fieldset><legend>Blocks Workspace: Used for setting up problem, setting up solution, and testing the quiz.</legend>  -->
    <table>
       <div style="visibility:hidden" id="instructions">Instructions go here</div>
       <tr>
	<td>
        <div id="quiz_name" style="visibility:hidden">Quiz Name goes here</div>
	</td>
       </tr>
       <tr>
         <td>
          <div id="quiz_question" style="visibility:hidden">
	    Here is where the quiz question goes.
	  </div>
          <div id="hint_html" style="visibility:hidden">
	    Here is where the hint goes.
	  </div>
        </td>
        <td>
	    <table>
	      <tr><td>
                 <input style="visibility:hidden" id="quiz_answer" width="40" type="text" onkeypress="if (event.keyCode == 13) toggleNewTest()"></input></td>
		 <td class="tabmin">&nbsp;</td>
 		 <td align="center"><button style="visibility:hidden" id="hint_button" onclick="testGiveHint()">Hint</button></td>
		 <td class="tabmin">&nbsp;</td>
		 <td class="tabmin">&nbsp;</td>
 		 <td align="center"><button style="visibility:hidden" id="submit_new_toggle" onclick="toggleNewTest()">Submit</button></td>
		 <td class="tabmin">&nbsp;</td>
	      </tr>
	    </table>
        </td>

       </tr>
       <tr>
	  <td><div style="visibility:hidden" contenteditable="true" width="300px" height="100px" id="quiz_result" readonly="readonly">Result goes here </div></td>
     </tr>
   </table>
   <hr>
   <script>
     function blocklyLoaded(blockly) {
       // Called once Blockly is fully loaded.
       window.Blockly = blockly;
     }
   </script>
   <iframe style="width: 100%; height: 100%; border: 1px solid #ccc;" src="blockly.html"></iframe>
<!--   </fieldset> -->
<!-- </fieldset> -->
</body>
</html>
